<script>
import { ref, onMounted, reactive, toRefs } from 'vue';
import { getSupplierInfo, updateSupplier, UploadSupplier } from "../api/my";
import { areaList } from '@vant/area-data';
import { showConfirmDialog, showNotify, showLoadingToast } from 'vant';



export default {
    setup() {
        const date = reactive({
            result: ref(''),
            result1: ref(''),
            value1: ref(''),
            loading: true,
            img1: [],
            img2: [],
            img3: [],
        })
        const showPicker = ref(false);
        const columns = [
            { text: '冻货', value: '冻货' },
            { text: '肉类', value: '肉类' },
            { text: '海鲜', value: '海鲜' },
            { text: '蔬菜', value: '蔬菜' },
        ];
        const onConfirm = ({ selectedOptions }) => {
            date.result = selectedOptions[0]?.text;
            showPicker.value = false;
        };
        const showArea = ref(false);
        const onConfirm1 = ({ selectedOptions }) => {
            showArea.value = false;
            date.result1 = selectedOptions.map((item) => item.text).join('/');
        };
        const active = ref(0);
        const user1 = localStorage.getItem('user');
        const user = JSON.parse(user1)
        const zhanghao = ref(user.name);
        const zhanghao1 = ref(user.name);
        onMounted(() => {

        });
        const onSubmit = (values) => {
            console.log('submit', values);
        };
        const select = () => {
            getSupplierInfo({}).then((ress) => {
                date.result = ress.data.stype
                date.result1 = ress.data.saddress
                date.value1 = ress.data.sannouncement
                date.img1 = [{ url: ress.data.slogo }]
                date.img2 = [{ url: ress.data.sphoto }]
                date.img3 = [{ url: ress.data.squalification }]
                date.loading = false
            })
        }
        select();
        const events = {
            afterRead1(file) {
                // 此时可以自行将文件上传至服务器
                const formData = new FormData();
                formData.append('file', file.file);
                UploadSupplier(formData).then((res) => {
                    date.img1 = [{ url: res }]
                    // console.log(res);
                })
            },
            afterRead2(file) {
                // 此时可以自行将文件上传至服务器
                const formData = new FormData();
                formData.append('file', file.file);
                UploadSupplier(formData).then((res) => {
                    date.img2 = [{ url: res }]
                    // console.log(res);
                })
            },
            afterRead3(file) {
                // 此时可以自行将文件上传至服务器
                const formData = new FormData();
                formData.append('file', file.file);
                UploadSupplier(formData).then((res) => {
                    date.img3 = [{ url: res }]
                    // console.log(res);
                })
            },
        }
        const querenxiugai = () => {
            showConfirmDialog({
                title: '提示',
                message:
                    '确定要修改嘛？',
            }).then(() => {
                showLoadingToast({
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                getSupplierInfo({}).then((ress) => {
                    updateSupplier({
                        id: ress.data.sid,
                        enterpriseName: zhanghao.value,
                        name: zhanghao1.value,
                        address: date.result1,
                        announcement: date.value1,
                        type: date.result,
                        logo: date.img1[0].url,
                        photo: date.img2[0].url,
                        qualification: date.img3[0].url,
                    }).then((res) => {
                        if (res.result == 0) {
                            showNotify({ type: 'primary', message: res.message });
                        } else {
                            showNotify({ type: 'danger', message: res.message });
                        }
                    })
                })
            })
                .catch(() => {
                });


        }
        return {
            ...toRefs(date),
            ...events,
            active,
            user,
            zhanghao,
            zhanghao1,
            onSubmit,
            columns,
            onConfirm,
            onConfirm1,
            showPicker,
            areaList,
            showArea,
            querenxiugai
        };

    }
}
</script>
<template>
    <div style="padding: 15px;">
        <van-skeleton title avatar :row="18" :loading="loading">
            <div>
                <van-form @failed="onFailed">
                    <van-cell-group inset>
                        <van-field v-model="zhanghao" label="企业名称" placeholder="企业名称"
                            :rules="[{ required: true, message: '请填写企业名称' }]" />
                        <van-field v-model="zhanghao1" label="负责人名称" placeholder="负责人名称"
                            :rules="[{ required: true, message: '请填写负责人名称' }]" />
                        <van-field v-model="result" is-link readonly name="picker" label="经营种类" placeholder="请选择经营种类"
                            @click="showPicker = true" />
                        <van-popup v-model:show="showPicker" position="bottom">
                            <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                        </van-popup>
                        <van-field v-model="result1" is-link readonly name="area" label="企业地址" placeholder="请选择企业地址"
                            @click="showArea = true" />
                        <van-popup v-model:show="showArea" position="bottom">
                            <van-area :area-list="areaList" @confirm="onConfirm1" @cancel="showArea = false" />
                        </van-popup>
                        <van-field v-model="value1" label="企业公告" placeholder="请输入企业公告"
                            :rules="[{ required: true, message: '请填写企业公告' }]" />
                        <van-field name="uploader" label="企业logo">
                            <template #input>
                                <van-uploader v-model="img1" :after-read="afterRead1" />
                            </template>
                        </van-field>
                        <van-field name="uploader" label="企业照片">
                            <template #input>
                                <van-uploader v-model="img2" :after-read="afterRead2" />
                            </template>
                        </van-field>
                        <van-field name="uploader" label="企业资质">
                            <template #input>
                                <van-uploader v-model="img3" :after-read="afterRead3" />
                            </template>
                        </van-field>
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit" @click="querenxiugai()">
                            确认修改
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-skeleton>
    </div>

</template>
